<template>
  <el-color-picker
    v-if="modelType === 0"
    v-model="themeColor"
    :predefine="colorValues"
    size="small"
    popper-class="color-picker-panel"
    style="margin-right: 12px"
    @change="handleThemeColorChange"
  />
</template>

<script>
export default {
  name: 'SwatchesPopover',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    modelType: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: '#406EFF'
    }
  },
  data() {
    return {
      popoverVisible: false
    };
  },
  computed: {
    colorValues() {
      return ['#406EFF', '#31CC9C', '#FD8546', '#FFBC3D', '#7ECBF4', '#D2ACFF'];
    },
    themeColor: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    handleThemeColorChange() {
      this.popoverVisible = false;
    }
  }
};
</script>
<style lang="scss">
.color-picker-panel {
  .el-color-dropdown__link-btn {
    display: none;
  }
}
</style>
<style scoped lang="scss">
::v-deep .el-color-picker__color {
  border: none;
}
::v-deep .el-color-picker__color-inner {
  border-radius: 2px;
}
</style>
